<template>
  <view class="container">
    <view class="back"></view>
    <kt-nav-bar
        :icon="$kt.file.byPath('tabbar/shoppingCart-selected.svg')"
        :title="$i18n.zhToGlobal('购物车')"></kt-nav-bar>
    <view style="height: 20rpx"></view>
    <view>

      <view
          v-if="goodsCartList.length === 0"
          style="text-align: center;margin-top: 100rpx;position: fixed;top:calc(50% - 100rpx);left: 50%;transform: translate(-50%,-50%);"
      >
        <view
            class="btn"
            @click="$kt.router.navTo('/pages/goodsSearch/goodsSearch')"
            style="display: inline-block;">
          <view>
            <image
                mode="aspectFill"
                class="cart-icon"
                :src="$kt.file.byPath('tabbar/shoppingCart-selected.svg')"></image>
          </view>
          <view
              style="color: #666666">
            {{ $i18n.zhToGlobal('购物车为空') }}
          </view>
        </view>

      </view>
      <view
          v-for="(item,index) in goodsCartList"
          :key="index">

        <shopping-cart
            :number="item.goodsNumber"
            :goods="item.goods"
            :goodsAttrGroup="item.goodsAttrGroup?item.goodsAttrGroup:[]">
        </shopping-cart>

      </view>

    </view>
    <view style="height: 150rpx"></view>
    <no-login></no-login>
  </view>
</template>

<script>
import shop from "@/js/shop";

export default {
  data() {
    return {
      goodsCartList: []
    }
  },
  created() {

    this.$kt.event.on("goodsCart:change", () => {
      this.getSelfGoodsCart();
      console.log("----")
    });

    this.$kt.event.on("login:success", () => {
      this.getSelfGoodsCart();
      console.log("----")
    });


    this.getSelfGoodsCart();
  },
  methods: {
    // /business-shop-web/shopGoodsCart/getSelfGoodsCart
    getSelfGoodsCart() {
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoodsCart/getSelfGoodsCart',
        stateSuccess: (res) => {
          let resData = res.data;
          let goodsList = [];
          for (let i = 0; i < resData.length; i++) {
            goodsList.push(resData[i].goods);
          }

          let goodsCartList = JSON.parse(JSON.stringify(resData));
          shop.handleList(goodsList).then((res) => {
            this.goodsCartList = res;
            for (let i = 0; i < goodsCartList.length; i++) {
              goodsCartList[i].goods = goodsList[i];
            }
            this.goodsCartList = goodsCartList;
            console.log(this.goodsCartList, "-=-=-=-")
            this.$forceUpdate();
            // 按照gmtCreate排序
            this.goodsCartList.sort((a, b) => {
              return b.gmtCreate - a.gmtCreate;
            });
          });

        }
      });
    },

    toGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goodsDetail/goodsDetail'
      })
    }

  }

}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: -1;
}

.cart-icon {
  width: 200rpx;
  height: 200rpx;
  opacity: .3;
}

.btn:active {
  opacity: .8;
}

</style>